<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: #f0f2f5;
            /* padding: 2rem; */
        }

        /* 整体布局 */
        .tip {
            margin: 10px auto;
            padding: 0 1rem;
            width: 1220px;
            height: 48px;
            line-height: 48px;
            border-radius: 0.5rem;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
        }

        .keyboard {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            width: 1220px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
            padding: 1rem;
        }

        .left-side {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 790px;
        }

        .center-side {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .right-side {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .row {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
            margin-bottom: 0.3rem;
        }

        .key {
            position: relative;
            display: flex;
            width: 48px;
            height: 48px;
            justify-content: center;
            align-items: center;
            color: #fff;
            background-color: #000;
            border-radius: 0.25rem;
            box-shadow: 3px 3px 3px #ccc;
            cursor: pointer;
            user-select: none;

            &:hover {
                color: pink;
            }
        }

        .key.active {
            background-color: #007bff;
            color: #fff;
        }

        .dual-char {
            line-height: 1;
        }

        .dual-char .char-top,
        .dual-char .char-bottom {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 14px;
            pointer-events: none;
        }

        .dual-char .char-top {
            top: 8px;
        }

        .dual-char .char-bottom {
            bottom: 8px;
        }

        .algin {
            display: flex;
            padding-left: 6px;
        }

        .marker {
            position: absolute;
            bottom: 6px;
            left: 50%;
            width: 8px;
            height: 2px;
            background-color: #fff;
            transform: translateX(-50%);
            pointer-events: none;
        }

        /* 功能键区 */
        .function {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.3rem;
        }

        .esc {
            margin-right: 24px;
        }

        .group {
            display: flex;
            gap: 5px;
        }

        /* 主键盘区 */
        .main {
            display: flex;
            flex-direction: column;
        }

        .tab {
            width: 74px;
        }

        .capslock {
            width: 100px;
        }

        .shift {
            width: 126px;
        }

        .ctrl {
            width: 88px;
        }

        .flag,
        .alt,
        .menu {
            width: 58px;
        }

        .atuowidth {
            flex-grow: 1;
        }

        /* 光标控制键区 */
        .cursors {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 5px;
            grid-template-areas:
                'insert home pageup'
                'delete end pagedown'
                '. . .'
                '. up .'
                'left down right';
            font-size: 14px;
        }

        .insert {
            grid-area: insert;
        }

        .home {
            grid-area: home;
        }

        .pageup {
            grid-area: pageup;
        }

        .delete {
            grid-area: delete;
        }

        .end {
            grid-area: end;
        }

        .pagedown {
            grid-area: pagedown;
        }

        .up {
            grid-area: up;
        }

        .left {
            grid-area: left;
        }

        .down {
            grid-area: down;
        }

        .right {
            grid-area: right;
        }

        /* 数字键盘区 */
        .lamps {
            display: flex;
            height: 48px;
            gap: 5px;
            justify-content: space-between;
            margin-bottom: 0.3rem;
            padding: 10px 20px;
            user-select: none;
        }

        .lamps div {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #333;
        }

        .lamp {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ccc;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .lamp.active {
            background-color: #4caf50;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.8);
        }

        .lamp.inactive {
            background-color: #696767;
            box-shadow: 0 0 8px rgba(114, 113, 113, 0.8);
        }

        .nums {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 5px;
        }

        .add {
            height: auto;
            grid-column: 4 / 5;
            grid-row: 2 / 4;
        }

        .enter {
            height: auto;
            grid-column: 4 / 5;
            grid-row: 4 / 6;
        }

        .ins {
            width: auto;
            grid-column: 1 / 3;
            grid-row: 5 / 6;
        }

        /* 提示信息 */
        .tooltip {
            position: absolute;
            bottom: calc(100% + 10px);
            left: 50%;
            transform: translateX(-50%);
            background: #333;
            color: #fff;
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 14px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            white-space: nowrap;
            pointer-events: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }

        .key:hover .tooltip {
            opacity: 1;
            visibility: visible;
        }

        .info-container {
            display: flex;
            flex-direction: column;
            gap: 5px;
            max-width: 1220px;
            margin: 10px auto;
            background-color: #fff;
            border-radius: 0.5rem;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
            padding: 0.85rem;
            user-select: none;
        }

        .info-container h2 {
            font-size: 14px;
            color: #333;
            padding-left: 0.5rem;
        }

        .cards,
        .fingers {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 10px;
            padding: 0.5rem 0.5rem;
        }

        .card,
        .finger {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 8px;
            background: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
        }

        .card:hover,
        .finger:hover {
            background: #007bff;
            color: white;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .key.highlight {
            background-color: #ffcc00 !important;
            color: #000 !important;
        }
    </style>
</head>

<body>
    <div class="tip"></div>
    <div class="keyboard">
        <div class="left-side">
            <div class="row function">
                <div class="key esc" data-tooltip="取消键。在许多软件中它被定义为退出键，一般用做脱离当前操作或退出当前运行的软件。">ESC</div>
                <div class="group">
                    <div class="key" data-tooltip="">F1</div>
                    <div class="key" data-tooltip="">F2</div>
                    <div class="key" data-tooltip="">F3</div>
                    <div class="key" data-tooltip="">F4</div>
                </div>
                <div class="group">
                    <div class="key" data-tooltip="">F5</div>
                    <div class="key" data-tooltip="">F6</div>
                    <div class="key" data-tooltip="">F7</div>
                    <div class="key" data-tooltip="">F8</div>
                </div>
                <div class="group">
                    <div class="key" data-tooltip="">F9</div>
                    <div class="key" data-tooltip="">F10</div>
                    <div class="key" data-tooltip="">F11</div>
                    <div class="key" data-tooltip="">F12</div>
                </div>
            </div>
            <div class="main">
                <!-- 数字行 -->
                <div class="row">
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">~</div>
                        <div class="char-bottom">`</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">!</div>
                        <div class="char-bottom">1</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">@</div>
                        <div class="char-bottom">2</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">#</div>
                        <div class="char-bottom">3</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">$</div>
                        <div class="char-bottom">4</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">%</div>
                        <div class="char-bottom">5</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">^</div>
                        <div class="char-bottom">6</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">&</div>
                        <div class="char-bottom">7</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">*</div>
                        <div class="char-bottom">8</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">(</div>
                        <div class="char-bottom">9</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">)</div>
                        <div class="char-bottom">0</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">—</div>
                        <div class="char-bottom">_</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">+</div>
                        <div class="char-bottom">=</div>
                    </div>
                    <div class="key atuowidth" data-tooltip="退格键，删除当前光标前一个字符">Backspace</div>
                </div>

                <!-- QWERTY行 -->
                <div class="row">
                    <div class="key tab" data-tooltip="制表键。用以将焦点推进到下一个定位点上。">Tab</div>
                    <div class="key" data-tooltip="">Q</div>
                    <div class="key" data-tooltip="">W</div>
                    <div class="key" data-tooltip="">E</div>
                    <div class="key" data-tooltip="">R</div>
                    <div class="key" data-tooltip="">T</div>
                    <div class="key" data-tooltip="">Y</div>
                    <div class="key" data-tooltip="">U</div>
                    <div class="key" data-tooltip="">I</div>
                    <div class="key" data-tooltip="">O</div>
                    <div class="key" data-tooltip="">P</div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">{</div>
                        <div class="char-bottom">[</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">}</div>
                        <div class="char-bottom">]</div>
                    </div>
                    <div class="key dual-char atuowidth" data-tooltip="">
                        <div class="char-top">|</div>
                        <div class="char-bottom">\</div>
                    </div>
                </div>

                <!-- ASDF行 -->
                <div class="row">
                    <div class="key capslock" data-key="CapsLock" data-tooltip="大小写字母锁定键。灯亮，输入大字字母；灯灭，输入小写字母。">Caps Lock</div>
                    <div class="key" data-tooltip="基本键—左手小指">A</div>
                    <div class="key" data-tooltip="基本键—左手无名指">S</div>
                    <div class="key" data-tooltip="基本键—左手中指">D</div>
                    <div class="key" data-tooltip="基本键—左手食指">F
                        <div class="marker"></div>
                    </div>
                    <div class="key" data-tooltip="">G</div>
                    <div class="key" data-tooltip="">H</div>
                    <div class="key" data-tooltip="基本键—右手食指">J
                        <div class="marker"></div>
                    </div>
                    <div class="key" data-tooltip="基本键—右手中指">K</div>
                    <div class="key" data-tooltip="基本键—右手无名指">L</div>
                    <div class="key dual-char" data-tooltip="基本键—右手小指">
                        <div class="char-top">:</div>
                        <div class="char-bottom">;</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">"</div>
                        <div class="char-bottom">'</div>
                    </div>
                    <div class="key atuowidth" data-tooltip="回车键。执行一个命令或换行或确认。">Enter</div>
                </div>

                <!-- ZXCV行 -->
                <div class="row">
                    <div class="key shift" data-tooltip="上档键。功能一：输入双字符键的上档字符；功能二：当键盘处于小写字母状态，输入大写字母，当键盘处于大写字母状态，输入小写字母。">Shift</div>
                    <div class="key" data-tooltip="">Z</div>
                    <div class="key" data-tooltip="">X</div>
                    <div class="key" data-tooltip="">C</div>
                    <div class="key" data-tooltip="">V</div>
                    <div class="key" data-tooltip="">B</div>
                    <div class="key" data-tooltip="">N</div>
                    <div class="key" data-tooltip="">M</div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">&lt;</div>
                        <div class="char-bottom">,</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">&gt;</div>
                        <div class="char-bottom">.</div>
                    </div>
                    <div class="key dual-char" data-tooltip="">
                        <div class="char-top">?</div>
                        <div class="char-bottom">/</div>
                    </div>
                    <div class="key atuowidth" data-tooltip="上档键。功能一：输入双字符键的上档字符；功能二：当键盘处于小写字母状态，输入大写字母，当键盘处于大写字母状态，输入小写字母。">Shift</div>
                </div>

                <!-- 空格键行 -->
                <div class="row">
                    <div class="key ctrl" data-tooltip="控制键。该键不能单独使用，需要和其他键组合使用，能完成一些特定的控制功能。操作时，先按住 Ctrl 键不放，再按下其他键。">Ctrl</div>
                    <div class="key flag" data-tooltip="微标键。按下该键可以打开开始菜单。还可以和其它键组合使用，完成一些特定的功能。">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24" height="24">
                            <path fill="#FFF"
                                d="M22 6v16H6V8.5L22 6zm2 0l18-2.5V22H24V6zm-2 18v16l-16-2.5V24h16zm2 0h18v16.5L24 42V24z" />
                        </svg>
                    </div>
                    <div class="key alt" data-tooltip="转换键。该键不能单独使用，需要和其他键组合使用，能完成一些特定的控制功能。操作时，先按住 ALT 键不放，再按下其他键，">Alt</div>
                    <div class="key atuowidth" data-tooltip="空格键">Space</div>
                    <div class="key alt" data-tooltip="转换键。该键不能单独使用，需要和其他键组合使用，能完成一些特定的控制功能。">Alt</div>
                    <div class="key flag" data-tooltip="微标键。按下该键可以打开开始菜单。还可以和其它键组合使用，完成一些特定的功能。">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24" height="24">
                            <path fill="#FFF"
                                d="M22 6v16H6V8.5L22 6zm2 0l18-2.5V22H24V6zm-2 18v16l-16-2.5V24h16zm2 0h18v16.5L24 42V24z" />
                        </svg>
                    </div>
                    <div class="key menu" data-tooltip="应用程序键。相当于左右菜单。">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="#fff">
                            <rect x="2" y="2" width="20" height="20" rx="2" ry="2" fill="none" stroke="#fff"
                                stroke-width="2" />
                            <rect x="6" y="8" width="12" height="2" rx="1" />
                            <rect x="6" y="12" width="12" height="2" rx="1" />
                            <rect x="6" y="16" width="12" height="2" rx="1" />
                        </svg>
                    </div>
                    <div class="key ctrl" data-tooltip="控制键。该键不能单独使用，需要和其他键组合使用，能完成一些特定的控制功能。">Ctrl</div>
                </div>
            </div>
        </div>

        <div class="center-side">
            <div class="row">
                <div class="key dual-char" data-tooltip="屏幕硬拷贝键，可以将当前屏幕的内容复制到剪贴板。">
                    <div class="char-top algin">Print</div>
                    <div class="char-bottom">Screen</div>
                </div>
                <div class="key dual-char" data-key="ScrollLock" data-tooltip="滚动锁定键">
                    <div class="char-top algin">Scrool</div>
                    <div class="char-bottom algin">Lock</div>
                </div>
                <div class="key dual-char" data-tooltip="暂停键">
                    <div class="char-top algin">Pause</div>
                    <div class="char-bottom algin">Break</div>
                </div>
            </div>
            <div class="cursors">
                <div class="key insert" data-tooltip="改变插入与改写状态">Insert</div>
                <div class="key home" data-tooltip="使光标快速移动到本行的开始">Home</div>
                <div class="key pageup dual-char" data-tooltip="向前翻页">
                    <div class="char-top algin">Page</div>
                    <div class="char-bottom algin">UP</div>
                </div>
                <div class="key delete" data-tooltip="删除键，删除当前光标右边的字符">Delete</div>
                <div class="key end" data-tooltip="使光标快速移动到本行的末尾">End</div>
                <div class="key pagedown dual-char" data-tooltip="向后翻页">
                    <div class="char-top algin">Page</div>
                    <div class="char-bottom algin">Down</div>
                </div>
                <div class="key up" data-tooltip="上">↑</div>
                <div class="key left" data-tooltip="左">←</div>
                <div class="key down" data-tooltip="下">↓</div>
                <div class="key right" data-tooltip="右">→</div>
            </div>
        </div>

        <div class="right-side">
            <!-- 指示灯区 -->
            <div class="lamps">
                <div class="lamp light active" data-key="NumLock" data-tooltip="数字锁定键指示灯">
                    <div class="lamp"></div>
                    <div>NumLock</div>
                </div>
                <div class="lamp light inactive" data-key="CapsLock" data-tooltip="大写字母锁定键指示灯">
                    <div class="lamp"></div>
                    <div>CapsLock</div>
                </div>
                <div class="lamp light inactive" data-key="ScrollLock" data-tooltip="滚动锁定键指示灯">
                    <div class="lamp"></div>
                    <div>ScrollLock</div>
                </div>
            </div>
            <!-- 数字键盘区 -->
            <div class="nums">
                <div class="key dual-char" data-key="NumLock" data-tooltip="数字锁定键。对应的灯亮时，数字输入有效；灯灭，用于控制光标的移动。">
                    <div class="char-top">Num</div>
                    <div class="char-bottom">Lock</div>
                </div> 
                <div class="key" data-tooltip="除号">/</div>
                <div class="key" data-tooltip="乘号">*</div>
                <div class="key" data-tooltip="减号">-</div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">7</div>
                    <div class="char-bottom">Home</div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">8</div>
                    <div class="char-bottom">↑</div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">9</div>
                    <div class="char-bottom">PgUp</div>
                </div>
                <div class="key add" data-tooltip="加号">+</div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">4</div>
                    <div class="char-bottom">←</div>
                </div>
                <div class="key" data-tooltip="">5
                    <div class="marker"></div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">6</div>
                    <div class="char-bottom">→</div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">1</div>
                    <div class="char-bottom">End</div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">2</div>
                    <div class="char-bottom">↓</div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">3</div>
                    <div class="char-bottom">PgDn</div>
                </div>
                <div class="key enter" data-tooltip="小回车键，与主键盘区上的回车键功能完全相同。">Enter</div>
                <div class="key ins dual-char" data-tooltip="">
                    <div class="char-top">0</div>
                    <div class="char-bottom">Ins</div>
                </div>
                <div class="key dual-char" data-tooltip="">
                    <div class="char-top">.</div>
                    <div class="char-bottom">Del</div>
                </div>
            </div>
        </div>
    </div>

    <div class="info-container">
        <h2>中文标点符号：</h2>
        <div class="cards">
            <div class="card" data-key="，">逗号</div>
            <div class="card" data-key="。">句号</div>
            <div class="card" data-key="？">问号</div>
            <div class="card" data-key="、">顿号</div>
            <div class="card" data-key="；">分号</div>
            <div class="card" data-key="：">冒号</div>
            <div class="card" data-key="！">感叹号</div>
            <div class="card" data-key="“”">双引号</div>
            <div class="card" data-key="‘’">单引号</div>
            <div class="card" data-key="—">破折号</div>
            <div class="card" data-key="…">省略号</div>
            <div class="card" data-key="·">间隔号</div>
            <div class="card" data-key="（">左圆括号</div>
            <div class="card" data-key="）">右圆括号</div>
            <div class="card" data-key="《">左书名号</div>
            <div class="card" data-key="》">右书名号</div>
            <div class="card" data-key="【">左方头括号</div>
            <div class="card" data-key="】">右方头括号</div>
            <div class="card" data-key="￥">人民币符号</div>
        </div>

        <h2>分指分工：</h2>
        <div class="fingers">
            <div class="finger" data-finger="left-pinky">左手小指</div>
            <div class="finger" data-finger="left-ring">左手无名指</div>
            <div class="finger" data-finger="left-middle">左手中指</div>
            <div class="finger" data-finger="left-index">左手食指</div>
            <div class="finger" data-finger="base-key">基本键</div>
            <div class="finger" data-finger="right-index">右手食指</div>
            <div class="finger" data-finger="right-middle">右手中指</div>
            <div class="finger" data-finger="right-ring">右手无名指</div>
            <div class="finger" data-finger="right-pinky">右手小指</div>
            <div class="finger" data-finger="thumb">大拇指</div>
            <div class="finger" data-finger="clear">取消显示</div>
        </div>
    </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const keys = document.querySelectorAll('.key');
            const lights =document.querySelectorAll('.light');
            const tip = document.querySelector('.tip');
            const numLockLamp = document.querySelector('.lamp[data-key="NumLock"]');
            const capsLockLamp = document.querySelector('.lamp[data-key="CapsLock"]');
            const scrollLockLamp = document.querySelector('.lamp[data-key="ScrollLock"]');

            // 初始化工具提示
            keys.forEach(key => {
                key.addEventListener('mouseenter', () => {
                    const keyName = key.textContent.trim();
                    const tooltipText = key.getAttribute('data-tooltip');
                    tip.textContent = tooltipText ? `${keyName} ：${tooltipText}` : "";
                });

                key.addEventListener('mouseleave', () => {
                    tip.textContent = ''; // 鼠标移开时清空提示
                });

                // 添加点击事件监听器
                key.addEventListener('click', () => {
                    // 改变键的背景颜色
                    key.style.backgroundColor = '#4caf50'; // 绿色
                    key.style.color = '#fff'; // 白色文字

                    // 可选：设置一段时间后恢复原始颜色
                    setTimeout(() => {
                        key.style.backgroundColor = ''; // 恢复默认背景
                        key.style.color = ''; // 恢复默认文字颜色
                    }, 300); // 300 毫秒后恢复
                });
            });

            lights.forEach(light => {
                light.addEventListener('mouseenter', () => {
                    const lightName = light.textContent.trim()
                    const tooltipText = light.getAttribute('data-tooltip');
                    tip.textContent = tooltipText ? `${lightName} ：${tooltipText}` : "";
                });

                light.addEventListener('mouseleave', () => {
                    tip.textContent = ''; // 鼠标移开时清空提示
                });
            });

            // 监听 NumLock 键点击事件
            const numLockKey = document.querySelector('.key[data-key="NumLock"]');
            if (numLockKey && numLockLamp) {
                numLockKey.addEventListener('click', () => {
                    toggleLamp(numLockLamp);
                });
            }

            // 监听 CapsLock 键点击事件
            const capsLockKey = document.querySelector('.key[data-key="CapsLock"]');
            if (capsLockKey && capsLockLamp) {
                capsLockKey.addEventListener('click', () => {
                    toggleLamp(capsLockLamp);
                });
            }

            // 监听 ScrollLock 键点击事件
            const scrollLockKey = document.querySelector('.key[data-key="ScrollLock"]');
            if (scrollLockKey && scrollLockLamp) {
                scrollLockKey.addEventListener('click', () => {
                    toggleLamp(scrollLockLamp);
                });
            }

            // 切换灯状态的通用函数
            function toggleLamp(lamp) {
                if (lamp.classList.contains('active')) {
                    lamp.classList.remove('active');
                    lamp.classList.add('inactive');
                } else {
                    lamp.classList.remove('inactive');
                    lamp.classList.add('active');
                }
            }

            // 获取所有按键元素
            const shiftKeys = Array.from(keys).filter(key =>
                key.textContent.trim() === 'Shift' ||
                key.querySelector('.char-top')?.textContent.trim() === 'Shift'
            );

            const leftShiftKey = document.querySelector('.left-side .shift'); // 通过CSS类精准定位

            // 符号映射表（核心逻辑）
            const symbolMap = {
                '，': { char: ',', position: 'bottom' },
                '。': { char: '.', position: 'bottom' },
                '、': { char: '\\', position: 'bottom' },
                '？': { char: '?', position: 'top', shift: true },
                '！': { char: '!', position: 'top', shift: true },
                '；': { char: ';', position: 'bottom' },
                '：': { char: ':', position: 'top', shift: true },
                '“”': { char: '"', position: 'top', shift: true, isPair: true },
                '‘’': { char: "'", position: 'bottom', isPair: true },
                '（': { char: '(', position: 'top', shift: true },
                '）': { char: ')', position: 'top', shift: true },
                '《': { char: '<', position: 'top', shift: true },
                '》': { char: '>', position: 'top', shift: true },
                '【': { char: '[', position: 'bottom' },
                '】': { char: ']', position: 'bottom' },
                '—': { char: '—', position: 'top', shift: true, longPress: true },
                '…': { char: '^', position: 'top', shift: true },
                '·': { char: '`', position: 'bottom' },
                '￥': { char: '$', position: 'top', shift: true },
            };

            // 查找按键元素
            const findKey = (char, position = 'bottom') => {
                return Array.from(keys).find(key => {
                    const target = key.querySelector(`.char-${position}`);
                    return target?.textContent.trim() === char;
                });
            };

            // 卡片点击事件处理
            document.querySelectorAll('.card').forEach(card => {
                card.addEventListener('click', () => {
                    const symbol = card.dataset.key;
                    const config = symbolMap[symbol];
                    if (!config) return;

                    let targetKeys = [];

                    // 添加主键
                    const mainKey = findKey(config.char, config.position);
                    if (mainKey) targetKeys.push(mainKey);

                    // 仅添加左侧Shift键
                    if (config.shift && leftShiftKey) {
                        targetKeys.push(leftShiftKey);
                    }

                    // 激活按键（过滤无效值）
                    targetKeys.filter(Boolean).forEach(key => {
                        key.classList.add('active');
                        setTimeout(() => key.classList.remove('active'), 300);
                    });
                });
            });

            const fingers = document.querySelectorAll('.finger');

            // 手指对应的键映射
            const fingerKeyMap = {
                'base-key': ['A', 'S', 'D', 'F', 'J', 'K', 'L', ';'],
                'left-index': ['F', 'G', 'R', 'T', 'V', 'B'],
                'left-middle': ['D', 'E', 'C'],
                'left-ring': ['S', 'W', 'X'],
                'left-pinky': ['A', 'Q', 'Z', 'Shift', 'Caps Lock', 'Tab'], // 左手小指
                'right-index': ['H', 'J', 'Y', 'U', 'N', 'M'],
                'right-middle': ['K', 'I', '<'], // 修复右手中指的双字符键
                'right-ring': ['L', 'O', '>'], // 修复右手无名指的双字符键
                'right-pinky': ['P', ';', "'", '[', ']', '\\', 'Enter', 'RightShift', '?'], // 修复右手小指的双字符键
                'thumb': ['Space']
            };

            // 点击手指时高亮对应的键
            fingers.forEach(finger => {
                finger.addEventListener('click', () => {
                    // 清除所有键的高亮
                    keys.forEach(key => key.classList.remove('highlight'));

                    // 获取当前手指对应的键
                    const fingerType = finger.getAttribute('data-finger');
                    const targetKeys = fingerKeyMap[fingerType];

                    // 高亮对应的键
                    targetKeys.forEach(char => {
                        const key = Array.from(keys).find(k => {
                            const top = k.querySelector('.char-top')?.textContent.trim();
                            const bottom = k.querySelector('.char-bottom')?.textContent.trim();
                            const isRightShift = fingerType === 'right-pinky' && k.textContent.trim() === 'Shift' && k.classList.contains('atuowidth');
                            return top === char || bottom === char || k.textContent.trim() === char || isRightShift;
                        });

                        if (key) {
                            key.classList.add('highlight');
                        }
                    });
                });
            });

        });

        document.addEventListener('contextmenu', (e) => {
            e.preventDefault(); // 禁用默认右键菜单
            if (e.target && e.target.classList.contains('key')) {
                e.target.classList.toggle('active'); // 切换激活状态
            }
        });
    </script>
</body>

</html>